<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>easyloader</title>
<link rel="stylesheet" type="text/css" href="css/easyui.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/SyntaxHighlighter.css" />

<script type="text/javascript" src="js/shCore.js"></script>
<script type="text/javascript" src="js/shBrushJScript.js"></script>
<script type="text/javascript" src="js/shBrushXml.js"></script>
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
</head>
<body style="text-align:left">
<div style="padding:10px">

<h3>EasyLoader</h3>
<h4>Usage</h4>
<h5>Load EasyUI module</h5>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-c"><li class="alt"><span><span>easyloader.base&nbsp;=&nbsp;</span><span class="string">'../'</span><span>;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="comment">//&nbsp;set&nbsp;the&nbsp;easyui&nbsp;base&nbsp;directory</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>easyloader.load(<span class="string">'messager'</span><span>,&nbsp;</span><span class="keyword">function</span><span>(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="comment">//&nbsp;load&nbsp;the&nbsp;specified&nbsp;module</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;$.messager.alert(<span class="string">'Title'</span><span>,&nbsp;</span><span class="string">'load&nbsp;ok'</span><span>);&nbsp;&nbsp;</span></span></li><li class=""><span>});&nbsp;&nbsp;</span></li></ol></div><pre class="JScript" name="code-easyloader" style="display: none;">	easyloader.base = '../';    // set the easyui base directory
	easyloader.load('messager', function(){        // load the specified module
		$.messager.alert('Title', 'load ok');
	});
</pre>
<h5>Load script from an absolute url</h5>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-c"><li class="alt"><span><span>using(</span><span class="string">'http://code.jquery.com/jquery-1.4.4.min.js'</span><span>,&nbsp;</span><span class="keyword">function</span><span>(){&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">//&nbsp;...</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>});&nbsp;&nbsp;</span></li></ol></div><pre class="JScript" name="code-easyloader" style="display: none;">	using('http://code.jquery.com/jquery-1.4.4.min.js', function(){
		// ...
	});
</pre>
<h5>Load script from relative url</h5>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-c"><li class="alt"><span><span class="comment">//&nbsp;the&nbsp;script&nbsp;path&nbsp;relative&nbsp;to&nbsp;easyui&nbsp;directory</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>using(<span class="string">'./myscript.js'</span><span>,&nbsp;</span><span class="keyword">function</span><span>(){&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">//&nbsp;...</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>});&nbsp;&nbsp;</span></li></ol></div><pre class="JScript" name="code-easyloader" style="display: none;">	// the script path relative to easyui directory
	using('./myscript.js', function(){
		// ...
	});
</pre>

<h4>Properties</h4>
<table class="doc-table">
<tbody><tr>
<th><strong>Name</strong></th>
<th><strong>Type</strong></th>

<th><strong>Description</strong></th>
<th><strong>Default</strong></th>
</tr>
<tr>
<td>modules</td>
<td>object</td>
<td>Predefined modules.</td>
<td></td>
</tr>
<tr>
<td>locales</td>

<td>object</td>
<td>Predefined locales.</td>
<td></td>
</tr>
<tr>
<td>base</td>
<td>string</td>
<td>The easyui base directory, must end with '/'.</td>
<td>The base directory will be auto setted relative to easyload.js</td>
</tr>
<tr>

<td>theme</td>
<td>string</td>
<td>The name of theme that defined in 'themes' directory</td>
<td>default</td>
</tr>
<tr>
<td>css</td>
<td>boolean</td>
<td>Defines if loading css file when loading module</td>
<td>true</td>

</tr>
<tr>
<td>locale</td>
<td>string</td>
<td>The locale name</td>
<td>null</td>
</tr>
<tr>
<td>timeout</td>
<td>number</td>
<td>Timeout value in milliseconds. Fires if a timeout occurs.</td>

<td>2000</td>
</tr>
</tbody></table>

<h4>Defined locales</h4>
<ul>
<li>af</li>
<li>bg</li>
<li>ca</li>
<li>cs</li>
<li>cz</li>
<li>da</li>
<li>de</li>
<li>en</li>
<li>es</li>
<li>fr</li>
<li>nl</li>
<li>tr</li>
<li>zh_CN</li>
<li>zh_TW</li>
</ul>

<h4>Events</h4>
<table class="doc-table">
<tbody><tr>
<th><strong>Name</strong></th>
<th><strong>Parameters</strong></th>
<th><strong>Description</strong></th>
</tr>
<tr>
<td>onProgress</td>
<td>name</td>

<td>Fires when a module is loaded successfully.</td>
</tr>
<tr>
<td>onLoad</td>
<td>name</td>
<td>Fires when a module and it's dependencies are loaded successfully.</td>
</tr>
</tbody></table>

<h4>Methods</h4>
<table class="doc-table">
<tbody><tr>
<th><strong>Name</strong></th>
<th><strong>Parameter</strong></th>
<th><strong>Description</strong></th>
</tr>
<tr>
<td>load</td>
<td>module, callback</td>

<td>Load the specified module. When load success a callback function will be called.<br>
The module parameter valid type are:<br>
a single module name<br>
an module array<br>
a css file that end with '.css'<br>
a js file that end with '.js'</td>
</tr>
</tbody></table>

</div>	
</body>
</html>